<template>
	<div class="tankuang">
		<div class="layerBox">
			<div class="header">
				{{dataList.title}}
			</div>
			<div class="content">
				<span class="imgBox"></span>
				<span class="text">{{dataList.text}}</span>
			</div>
			<div class="footerBox">
				<ul class="footer">
					<li v-for="(item,idx) in dataList.button" :key="idx">
						<button type="button" @click="ev_click(item)">{{item.text}}</button>
					</li>
				</ul>
			</div>
			<div class="close" @click="close">X</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				flag: false
			}
		},
		methods: {
			close() {
				let type=0
				this.$emit('closeBtn',type)
			},
			ev_click(item){
				if(item.type==1){
					let type=1
					this.$emit('openBtn',type)
				}
				if(item.type==0){
					let type=0
					this.$emit('closeBtn',type)
				}
				
			}
		},
		props: {
			dataList: {
				type: Object,
				default () {
					return {}
				}
			}
		},
	}
</script>

<style lang="less" scoped="scoped">
	.tankuang {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);

		.layerBox {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			background-color: white;
			width: 300px;
			height: 150px;
			display: flex;
			flex-direction: column;
			border-radius: 5px;

			.header {
				display: flex;
				margin: 20px 0 0 20px;
			}

			.content {
				display: flex;
				margin: 20px 0 0 20px;
				line-height: 15px;
				.imgBox {
					width: 15px;
					height: 15px;
					display: inline-block;
					background-color: red;
					border-radius: 50%;
					margin-right: 10px;
				}
			}
			.footerBox{
				position: relative;
				.footer {
					position: absolute;
					right: 0;
					margin: 20px 0 0 20px;
					display: flex;
					li{
						margin-right: 10px;
					}
				}
				
			}
			
			.close {
				position: fixed;
				top: 20px;
				right: 20px;
			}
		}
	}
</style>
